<template>
    <div class="box">
        <div class="w header">
           <div>
                <img src="../assets/imgs/首页.png" alt="">
           </div>
           <div>
                <ul>
                    <li @click="jump(item.path)" v-for="item,index in list" :key="index">{{ item.name }}</li>

                </ul>
           </div>
           <div>
                <input type="text" placeholder="请输入要搜索的商品名称"><button>搜索</button>
           </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { useRouter } from 'vue-router'
import {ref,reactive } from "vue"
    const router = useRouter();
let list = ref([
    {
        name:'首页',
        path:'/home'
    },
    {
        name:'全部商品',
        path:'/goods'
    },
    {
        name:'个人中心',
        path:'/user'
    },
    {
        name:'我的订单',
        path:'/order'
    },
    {
        name:'专属福利',
        path:'/myfree'
    },
])

const jump = (val:string)=>{
    router.push(val)
}
</script>
 
<style lang = "less" scoped>
    .w{
        width: 1200px;
        margin: 0 auto;
    }
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        div{
            &:nth-child(1){
            img{
                display: block; 
            }
        }
        &:nth-child(2){
          ul{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            li{
                cursor: pointer;
                margin: 0 25px 0 25px;
            }
          }
           
         
        }
        &:nth-child(3){
            input{
                padding: 10px;
                border: 1px solid #dedede;
                border-top-left-radius: 40px;
                border-bottom-left-radius:40px ;
                text-indent: 8px;
            }
            button{
                padding: 8px 5px;
                border: 1px solid #dedede;
                background-color: #0a328e;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                font-size: 12px;
                cursor: pointer;
                color: #dedede;
            }
        }
    }
              
}
    li{
        list-style: none;
    }
</style>